@import "../css/mdcss/md";

.flow3g-view {
  padding: 8px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .clearfix;
}

.dayflow-row {
  margin: 8px 16px;
  font-size: @font-size-h5;

  > span {
    margin-left: 8px;
    padding: 0 8px;
    color: @accent-2-color;
    font-size: @font-size-h5;
    width: 180px;
  }

  > input {
    margin-left: 8px;
    padding: 0 8px;
    color: @accent-2-color;
    font-size: @font-size-h5;
    width: 180px;
  }

  .md-checkbox-field {
    width: 150px;
    overflow: hidden;
    margin: 0;
  }
}

.dayflow-location {
  padding: 16px;

  span {
    display: block;
    color: @primary-1-color;
    font-size: @font-size-h5;
    margin-top: 16px;
    padding: 0 8px;
  }

  .dayflow-location-info {
    width: 100%;
    height: 48px;
    padding: 0 8px;
    border: none;
    border-bottom: 2px solid @primary-1-color;
    color: @light-black;
    font-size: @font-size-h4;
  }

}

.dayflow-container {
  float: left;
  width: 25%;

  &.fullwidth {
    width: 100%;
  }

  .dayflow-chart-title {
    font-size: @font-size-h5;
    color: @dark-black;
    padding-left: 16px;
  }

  .dayflow-chart {
    height: 256px;
  }

  .dayflow-table, .dayflow-chart, .dayflow-location {
    margin: 16px 16px;
    background: @white;
    overflow-x: auto;
    overflow-y: hidden;

    .dft-tille {
      font-size: @font-size-h4;
      height: 64px;
      line-height: 64px;
      color: @dark-black;
      padding-left: 24px;
      float: left;

      &.right {
        float: right;
        padding-left: 0px;
        padding-right: 24px
      }
    }

    .dft-grid {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      max-width: 100%;

      thead {
        tr {
          height: 56px;
          th {
            font-size: @font-size * 0.9;
            color: @light-black;
            vertical-align: middle;
            font-weight: 500;
            border-width: 1px;
            border-bottom: 2px solid #f0f0f0;
            padding: 10px;

            &:first-child {
              padding-left: 24px;
            }
            &:last-child {
              padding-right: 24px;
            }

            &.number {
              text-align: right;
            }
          }
        }
      }

      tbody {
        tr {
          height: 48px;
          td {
            color: @dark-black;
            padding: 10px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #f0f0f0;
            white-space: normal;
            &:first-child {
              padding-left: 24px;
            }
            &:last-child {
              padding-right: 24px;
            }

            &.number {
              text-align: right;
            }

            em.mac {
              color: @primary-1-color;
            }
          }
        }
      }
    }
  }
}

@media screen {
  @media (max-width: 1600px) {
    .dayflow-container {
      width: 50%;

      &.fullwidth {
        width: 100%;
      }
    }

    .dayflow-row {
      .md-checkbox-field {
        width: 150px;
      }
    }
  }
  @media (max-width: 900px) {

    .flow3g-view {
      padding: 8px 2px;
    }

    .dayflow-row {
      margin: 8px 10px;

      .md-checkbox-field {
        width: 35%;
      }

      > input {
        width: 100px;

        &.dayflow-querylocation {
          width: 200px;
        }
      }
    }

    .dayflow-container {
      width: 100%;

      .dayflow-chart-title {
        padding-left: 8px;
      }

      .dayflow-table, .dayflow-chart {

        margin: 16px 8px;

        .dft-grid {
          thead {
            tr {
              th {
                word-break: break-word;
                padding: 10px 2px;
                &:first-child {
                  padding-left: 12px;
                }
                &:last-child {
                  padding-right: 12px;
                }
              }
            }
          }
          tbody {
            tr {
              td {
                word-break: break-word;
                padding: 10px 2px;
                &:first-child {
                  padding-left: 12px;
                }
                &:last-child {
                  padding-right: 12px;
                }

                &.df-key {
                  padding: 10px 0px;
                  width: 220px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
}

.flow_download_xls {
  float: right;
}